import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  // 这个函数用来传递id,删除任务
  handle = () => {
    // 将当前Item组件实例所对应的数据的id传递给App
    const { id } = this.props.todo
    this.props.delTodo(id)
  }
  // 这个函数用来传递id,修改任务
  updateHandle = () => {
    this.props.updateTodo(this.props.todo.id)
  }
  render() {
    const { todoName, isDone } = this.props.todo

    return (
      <li>
        <label>
          <input
            type="checkbox"
            checked={isDone}
            onChange={this.updateHandle}
          />
          <span className={isDone ? 'active' : ''}>{todoName}</span>
        </label>
        <button className="btn btn-danger" onClick={this.handle}>
          删除
        </button>
      </li>
    )
  }
}
